<template>
	<view>
		<tablist :data="tabList" :index="tabIndex" @result="tabResult"></tablist>
		<view class="container">
			<noempty v-if="list.length == 0"></noempty>
			<view class="p-l20 p-r20 p-t30 p-b30" v-else>
				<view v-for="item in list" class="list_item bg-white p-30 m-b30 round-10">
					<view @click="detail(item)">
						<view class="uni-flex justify-space-between p-b20 m-b30 border-b1">
							<view class="fs16 fw600 w-80">
								{{ item.service_name }}  
							</view>
							<view class="fs14 text-blue">{{stateList[item.state]}}</view>
						</view>
						<view class="fs12 m-b20">发票类型：{{item.invoice_type==1 ? '普通发票' : '增值发票'}}</view>
						<view class="fs12 m-b20">抬头类型：{{item.header_type==1 ? '个人' : '企业'}}</view>
						<view class="fs12 m-b20">开票类型：{{item.money_type_name || "--"}}</view>
						<view class="fs12 m-b20">开票金额：{{item.money || "0"}}元</view>
						<view class="fs12 m-b20">申请时间：{{item.create_time || "--"}}</view>
					</view>
					<view class="uni-flex justify-right border-t1 p-t20" v-if="item.state == 0">
						<view class="bg-blue text-white p-t10 p-b10 p-l20 p-r20 round-10 m-l10" @click="cancel(item.id)">取消申请</view>
					</view>
					<view class="uni-flex justify-right border-t1 p-t20" v-if="item.state == 2 || item.state == 4">
						<view class="bg-blue text-white p-t10 p-b10 p-l20 p-r20 round-10 m-l10" @click="apply(item)">重新申请</view>
					</view>
				</view>
			</view>
		</view>
		<view class="pos-bottom bg-white w-100 p-20">
			<button class="formBtn m-auto bg-blue text-white w-90 round-40 fs14" @click="apply('')">申请开票</button>
		</view>
	</view>
</template>

<script>
import { invoiceList, invoiceCancel } from '@/api/invoice.js';
export default {
	data() {
		return {
			tabIndex: 0,
			tabList: [
				{value: 0, text: '审核中'},
				{value: 1, text: '已通过'},
				{value: 3, text: '已发放'},
				{value: 2, text: '已拒绝'},
				{value: 4, text: '已取消'},
			],
			stateList: ['审核中','已通过','已拒绝','已发放','已取消'],
			page: 1,
			size: 10,
			loading: true,
			list: [],
			state: 0,
			Sub_dh: ""
		}
	},
	onLoad(e) {
		this.Sub_dh = e.Sub_dh ? e.Sub_dh : ''
		this.getList();
	},
	methods: {
		tabResult(index){
			this.tabIndex = index;
			this.state = this.tabList[index]['value'];
			this.page = 1;
			this.loading = true;
			this.getList();
		},
		/**
		 * 申请记录列表
		 */
		getList(){
			let that = this;
			if(!that.loading) return;
			that.loading = false;
			let params = {
				page: that.page, 
				size: that.size,
				state: that.state,
				sub_dh: that.Sub_dh
			};
			invoiceList(params).then((res) => {
				const { data } = res;
				let list = [];
				if(that.page == 1) list = data.list;
				else list = [...that.list, ...data.list];
				that.list = list; 
				that.total = data.total;
				if(data.list.length > 0){
					that.loading = true;
				}
			})			
		},
		/**
		 * 详情
		 */
		detail(item) {
			uni.navigateTo({
				url: `/pages/apply/detail?content=${JSON.stringify(item)}`
			})			
		},
		/**
		 * 申请
		 */
		apply(item = "") {
			let url = `/pages/apply/invoice?Sub_dh=${this.Sub_dh}`
			if(item != "") {
				url += `&content=${JSON.stringify(item)}`
			}
			uni.navigateTo({
				url: url
			})			
		},
		/**
		 * 取消
		 */
		cancel(id){
			let that = this
			invoiceCancel({id: id}).then((res) => {
				if(res.code == 0) {
					uni.showToast({ title: "取消成功", icon: 'none' })
					let index = that.list.findIndex((res) => res.id === id)
					that.$set(that.list[index], "state", 4)
				}else {
					uni.showToast({ title: res.msg, icon: 'none' })					
				}
			})
		}
	}
}
</script>

<style>
.container {
	min-height: 100vh;
}
.img_item {
	width: 200rpx;
	height: 200rpx;
}
.exam_state {
	text-align: center;
}
</style>